.BulkActionButton:not([data-css-specificity-hack="🤣"]) {
  color: var(--mb-color-text-white);
  border-color: color-mix(in srgb, var(--mb-color-bg-light), transparent 100%);
  background-color: color-mix(
    in srgb,
    var(--mb-color-bg-light),
    transparent 90%
  );

  &:hover {
    color: var(--mb-color-text-white);
    border-color: color-mix(
      in srgb,
      var(--mb-color-background),
      transparent 100%
    );
    background-color: color-mix(
      in srgb,
      var(--mb-color-bg-light),
      transparent 70%
    );
  }

  &:disabled {
    color: var(--mb-color-text-disabled-inverse);
    border-color: color-mix(
      in srgb,
      var(--mb-color-background-disabled-inverse),
      transparent 100%
    );
    background-color: var(--mb-color-background-disabled-inverse);
  }
}

.BulkActionDangerButton:not([data-css-specificity-hack="🤣"]) {
  &:hover {
    color: var(--mb-color-text-white);
    border-color: color-mix(
      in srgb,
      var(--mb-color-background),
      transparent 100%
    );
    background-color: var(--mb-color-error);
  }

  &:disabled:hover {
    color: var(--mb-color-text-tertiary);
    border-color: color-mix(
      in srgb,
      var(--mb-color-background),
      transparent 100%
    );
    background-color: color-mix(
      in srgb,
      var(--mb-color-background),
      transparent 90%
    );
  }
}
